<template>
 <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"
    id='test'
    ref='test'></el-cascader>
  <!-- <div>
    <el-cascader-panel :options="options"></el-cascader-panel>
  </div> -->
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          value: "zhinan",
          label: "课程认证体系",
          children: [
            {
              value: "shejiyuanze",
              label: "华为认证体系",
              children: [
                {
                  value: "yizhi",
                  label: "AI"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "思科认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "甲骨文认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "vmware认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "python认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "学员就业及人才服务",
          children: [
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "业务入口",
          children: [
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "客户服务中心",
          children: [
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "daohang",
              label: "红帽认证体系",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                },
                {
                  value: "fankui",
                  label: "Big Date"
                },
                {
                  value: "xiaolv",
                  label: "Cloud Computing"
                },
                {
                  value: "kekong",
                  label: "Cloud Service"
                },
                {
                  value: "kekong",
                  label: "Enterprise Communicaion"
                },
                {
                  value: "kekong",
                  label: "loT"
                },
                {
                  value: "kekong",
                  label: "IVS"
                },
                {
                  value: "kekong",
                  label: "GaussDB"
                },
                {
                  value: "kekong",
                  label: "Kunpeng"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>
<style lang="stylus">
#test
  .el-input
    input 
      display none
    .el-input__suffix-inner
      position relative
      left 8px
      top -20px
      opacity 0
.el-popper
  border none!important
  .el-scrollbar
    border none!important
    .el-cascader-node
      &.in-active-path
        color #f4f4f4!important
        background #a50600!important
      &.is-active
        color #f4f4f4!important
        background #a50600!important
      &:hover
        color #a50600!important
        background #fff!important
.el-scrollbar__view
  font-family: MicrosoftYaHei;
  background #da0800
  border none
  color: #c8c8c8;
  // font-size: 18px;
  // line-height: 48px;
</style>
// #test{

// }
// .el-cascader-panel.is-bordered {
//   border: none;
// }
// .el-scrollbar__wrap {
//   background-color: #da0800;
// }
// .is-bordered {
// }
// .vmware-python {
// 	width: 139px;
// 	height: 319px;
// 	font-family: MicrosoftYaHei;
// 	font-size: 18px;
// 	font-weight: normal;
// 	font-stretch: normal;
// 	line-height: 60px;
// 	letter-spacing: 0px;
// 	color: #a50600;
// }

// .vmware-python .text-style-1 {
// 	font-family: MicrosoftYaHei;
// 	font-size: 18px;
// 	font-weight: normal;
// 	letter-spacing: 0px;
// 	color: #c8c8c8;
// }
>>>>>>> 8f650950ea007958bf6109f00dec4558b76ccdb0
